<template>
  <div class="processRecord">    
      <p-divider orientation="left"  style="margin-top: -5px;">流程记录</p-divider>
      <p-table bordered :pagination="false" :columns="columns" :data-source="tableData">
          <span :class="{handing: row.taskStatus === 2}" slot="startTime" slot-scope="row">{{ row.startTime }} </span>
          <span :class="{handing: row.taskStatus === 2}" slot="endTime" slot-scope="row">{{ row.endTime }} </span>
          <span :class="{handing: row.taskStatus === 2}" slot="activityName" slot-scope="row">{{ row.activityName }} </span>
          <span :class="{handing: row.taskStatus === 2}" slot="assigneeName" slot-scope="row">{{ row.assigneeName }} </span>
          <span :class="{handing: row.taskStatus === 2}" slot="readStatus" slot-scope="row">{{ readStatusMap[row.readStatus] }} </span>
          <span :title="row.operator" :class="{handing: row.taskStatus === 2}" slot="operator" slot-scope="row">{{ row.operator }} </span>
          <span :title="row.comment" :class="{handing: row.taskStatus === 2}" slot="comment" slot-scope="row">{{ row.comment }} </span>
      </p-table>
    </div>
</template>
<script>
import process from '@/api/process'
const columns = [
  {
    title: '创建时间',
    key: 'startTime',
    ellipsis: true,
    width: 180,
    scopedSlots: { customRender: 'startTime' },
  },
  {
    title: '处理时间',
    key: 'endTime',
    width: 180,
    ellipsis: true,
    scopedSlots: { customRender: 'endTime' },
  },
  {
    title: '节点名称',
    ellipsis: true,
    key: 'activityName',
    scopedSlots: { customRender: 'activityName' },
  },
  {
    title: '执行人',
    ellipsis: true,
    key: 'assigneeName',
    scopedSlots: { customRender: 'assigneeName' },
  },
  {
    title: '状态',
    key: 'readStatus',
    width: 90,
    ellipsis: true,
    scopedSlots: { customRender: 'readStatus' },
  },
  {
    title: '操作',
    key: 'operator',
    ellipsis: true,
    scopedSlots: { customRender: 'operator' },
  },
  {
    title: '处理意见',
    key: 'comment',
    ellipsis: true,
    scopedSlots: { customRender: 'comment' },
  },
];

export default {
  props: {
    step: String,
    status: String,
    processInstanceId: String,
    taskId: String,
  },
  data() {
    return {
      columns,
      readStatusMap: {
        1: "未读",
        2: "已读"
      },
      windowSize: true,
      tableData: [
        /* {
          startTime: '创建时间',
          endTime: '处理时间',
          activityName: '节点名称',
          assigneeName: '执行人',
          readStatus: '1',
          operator: 'operator',
          comment: '处理意见',
        } */
      ],
      tableHeight: "450",
    };
  },
  computed: {},
  methods: {
    getTaskRecordList(){
      process.getTaskRecordList({
         processInstanceId: this.processInstanceId,
      }).then( res =>{
        console.log('获取流程记录列表');
        this.tableData = res.data || [];
        this.tableData.forEach((el, i) =>{
          el.key = i + 1 + '';
        });
        console.log(this.tableData);
       /*  this.$nextTick( () =>{
          var curbody = document.getElementsByTagName('body');
          let clientHeight = curbody[0].clientHeight;
          if ( clientHeight < 691 ){
            clientHeight = 691;
          }
        }); */
      })
    },
  },
  mounted(){
    this.getTaskRecordList();
    /* if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      this.isPC = false;
    }else{
      this.isPC = true;
    } */
  }
};
</script>
<style lang="less">
.processRecord{
  overflow: hidden;
  .handing{
    color: #33cc66;
  }
  .title-line{
    font-size: 16px;
    margin: 30px 0 10px 0;
  }
}
</style>
